<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>扇形</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			canvas{
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	</head>
	<body>
		<div id="answer">
			
		</div>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
		</div>
	</body>
	<script>
		window.onload = function(){
			let oCanvas = document.getElementById('canvas');
				
				console.dir(oCanvas)
				
				let oPen = oCanvas.getContext("2d");
				
				console.dir(oPen)  
				
				let data = [{
					name: '第一季度',
					value: 100,
					color: 'red'
				},{
					name: '第二季度',
					value: 50,
					color: 'green'
				},{
					name: '第三季度',
					value: 85,
					color: 'blue'
				},{
					name: '第四季度',
					value: 150,
					color: 'yellow'
				},{
					name: '第五季度',
					value: 225,
					color: 'lightslategray'
				}];
				createSector(oPen, 250, 225, 100, data);
				function createSector(oPen, x, y, r, data) {
					let sum = 0;
					let startAngle = 0;
					for (var i = 0; i < data.length; i++) {
						sum += data[i].value; 
					}
					for (var i = 0; i < data.length; i++) {
						data[i].percentage = (data[i].value * 1.0) / sum * 360;
						oPen.beginPath();
						oPen.moveTo(x, y);
						oPen.arc(x, y, r, startAngle, startAngle + (Math.PI / 180) * data[i].percentage, false);
						startAngle += (Math.PI / 180) * data[i].percentage;
						oPen.fillStyle = data[i].color;
						oPen.fill();
						
						oPen.font = "normal bold 20px 华文行楷"
						let jd=oPen.measureText(data[i].name).width
						oPen.textAlign="right";
						oPen.fillStyle=data[i].color;				
						oPen.fillText(data[i].name,490,30+i*20);
						oPen.fillRect(475-jd,20+i*20,10,10);
					}
				}
			}
	</script>
</html>